<template>
<div>
  <el-dialog title="奖金池列表" :close-on-click-modal="false" width="70vw" :visible.sync="visible"
             @close="clearDataList()">
    <div style="float:right">
      <el-form :inline="true" :model="serchForm" class="form-inline" style="margin: 0px">
        <el-form-item>
          <el-checkbox v-model="serchForm.hiddenOverTime" @change="hiddenOverTimeChange">隐藏过期奖金</el-checkbox>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="loading" :data="dataForm" show-summary :summary-method="getSummaries" border style="width: 100%;">
      <el-table-column type="index" align="center" width="60px" label="序号"></el-table-column>
      <el-table-column prop="deptName" align="center" label="负责部门" width="200px">

      </el-table-column>
      <el-table-column prop="jjxFl" align="center" label="奖金项分类"></el-table-column>
      <el-table-column prop="jjxName" align="center" label="奖金项名称">
        <template slot-scope="scope">
          <el-link :underline="false" style="color:#0e258c" @click="bonusPoolDetail(scope.row)">{{scope.row.jjxName}}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="jjcZe" align="center" label="奖金金额(元)">
        <template slot-scope="scope">
          {{ $formatNum(scope.row.jjcZe) }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="jjcSye" label="使用金额(元)">
        <!--  scope.row.jjcZe - scope.row.jjcYe-->
        <template slot-scope="scope">
          {{ $formatNum(scope.row.jjcSye) }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="jjcYe" label="剩余金额(元)">
        <template slot-scope="scope">
          {{ $formatNum(scope.row.jjcYe) }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="jjrq" label="奖金项日期">
        <template slot-scope="scope">
          <span v-if="scope.row.jjrq">{{ $moment(scope.row.jjrq).format("YYYY-MM-DD") }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="jjcZt" align="center" label="状态">
        <template slot-scope="scope">
          <!-- <el-tag type="success" v-if="scope.row.jjcZt == 1">正常</el-tag>
          <el-tag type="danger" v-else>关闭</el-tag> -->
          <el-tag :type="scope.row.jjcZt=='正常'?'success':'danger'">{{scope.row.jjcZt}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="有效期至">
        <template slot-scope="scope">
          <div v-if="new Date(scope.row.gqTime).getTime() < new Date().getTime()">
            <span style="color: #C0C4CC">{{ $moment(scope.row.gqTime).format("YYYY-MM-DD") }}</span>
          </div>
          <div v-else-if="parseInt((new Date(scope.row.gqTime).getTime()-new Date().getTime())/ (1000 * 60 * 60 * 24)) <= 30">
            <span style="color: #F56C6C">{{ $moment(scope.row.gqTime).format("YYYY-MM-DD") }}</span>
          </div>
          <div v-else-if="parseInt((new Date(scope.row.gqTime).getTime()-new Date().getTime())/ (1000 * 60 * 60 * 24)) <= 60">
            <span style="color: #E6A23C">{{ $moment(scope.row.gqTime).format("YYYY-MM-DD") }}</span>
          </div>
          <div v-else>
            <span>{{ $moment(scope.row.gqTime).format("YYYY-MM-DD") }}</span>
          </div>
        </template>
      </el-table-column>

    </el-table>
    <div class="avue-crud__pagination">
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                     :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                     layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" plain @click="clearDataList">关闭</el-button>
    </span>
  </el-dialog>
  <!-- 奖金池使用明细 -->
    <jjc-gl-mx v-if="jjcGlMxVisible" ref="jjcGlMxRef"></jjc-gl-mx>
</div>
</template>
<script>
import {fetchList} from '@/api/jiangjin/jiangjinjjcxxb'
import JjcGlMx from './jiangjinfpjjfpdjb-jjcgl-mx'
export default {
  components:{
    JjcGlMx
  },
  data() {
    return {
      serchForm: {
        deptIds: '', // 登录用户奖金管理部门id集合，格式：xx,xx
        hiddenOverTime: false // 是否隐藏过期奖金
      },
      visible: false,
      dataForm: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      loading: false,
      jjcGlMxVisible:false
    }
  },
  created() {

  },
  methods: {
    // 初始化-deptIds：用户管理奖金部门id集合：格式：xx,xx
    init(deptIds) {
      this.visible = true
      this.serchForm.deptIds = deptIds
      this.getDataForm()
    },

    // 查询登录用户“所属”部门的下属部门的奖金池汇总信息
    getDataForm() {
      this.loading = true
      fetchList(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, this.serchForm)).then(response => {
        if(response.data.data.records){
          this.dataForm = response.data.data.records;
          this.dataForm.forEach(item=>{
            item.jjcSye=item.jjcZe*1-item.jjcYe*1
            item.jjcZt=item.jjcZt==1?'正常':'关闭'
          })
        }

        this.totalPage = response.data.data.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    getSummaries(param){
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        let list=data.filter(item=>item.jjcZt=='正常')
        const values = list.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 元';
        } else {
          sums[index] = '';
        }
      });

      return sums;

    },
    clearDataList() {
      this.visible = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataForm()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataForm()
    },

    // 隐藏过期奖金
    hiddenOverTimeChange() {
      this.pageIndex = 1
      this.getDataForm()

    },
    // 显示奖金池使用明细dialog
    bonusPoolDetail(row) {
      this.jjcGlMxVisible = true
      this.$nextTick(() => {
        this.$refs.jjcGlMxRef.init(row.deptId,row.deptName)
      })
    }
  }
}

</script>

<style scoped>

</style>
